<template>
    <div :class="{'fullScreenArea':isFull}">
        <vxe-button mode="text" @click="toggleFullScreen()">
          <template #icon>
              <i :class="isFull ? 'fullScreen-icon-small' : 'fullScreen-icon-big'"></i>
          </template>
        </vxe-button>
    </div>
</template>
<script>
import screenfull from 'screenfull';  
export default{
    data() {
        return {
            isFull: false
        }
    },
    created(){
        console.log('ScreenfullComponent2 created');
        this.init();
    },
    methods: {	
        //检测和响应全屏状态的改变
		init(){
            if (screenfull.isEnabled) {
                screenfull.on('change',this.change)
            }
        },
        //根据全屏状态 动态更新状态值 实现对于区域放大样式以及按钮icon切换
        change(){
            this.isFull = screenfull.isFullscreen
        },
        // 全屏放大与缩小
        toggleFullScreen() {
             //screenfull.isEnabled  此方法返回布尔值，判断当前能不能进入全屏
            if (!screenfull.isEnabled) {
                return false
            }
            const bodyNode = document.querySelector('body')
            //screenfull.toggle 此方法是执行全屏化操作。如果已是全屏状态，则退出全屏
            screenfull.toggle(bodyNode)
        },
    }
}
</script>
<style scoped>
.fullScreenArea{
    position:fixed !important;
    background-color: red;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.fullScreen-icon-small{
    width: 100px;
    height: 100px;
}
.fullScreen-icon-big{
    width: 200px;
    height: 200px;
}
</style>